<template>
  <a-select
    show-search
    @search="fetch"
    @change="handleChange"
    :value="value"
    mode="multiple"
  >
    <a-select-option
      v-for="item in data"
      :key="item.name"
      :value="item.name"
    >
      {{ item.name }}
    </a-select-option>
  </a-select>
</template>

<script>
import { getData } from "@/utils/http";
import { URL_MAP } from "@/config/config";
export default {
  data() {
    return {
      data: [],
      mySelf: {},
      value: [],
    };
  },
  model: {
    prop: "role",
    event: "change",
  },
  props: {
    role: {
      type: Array,
      default() {
          return []
      },
    },
  },
  computed: {
    roleList() {
        return this.$store.getters.roleList
    }
  },
  methods: {
    fetch(value) {
      getData(URL_MAP.ROLE_LIST, { name: value, pageSize: 10, currentPage: 0 })
        .then((data) => {
          if (data.code === 0) {
            this.data = data.data.data;
          } else {
            this.data = this.roleList;
            this.$message.error(data.msg);
          }
        })
        .catch((e) => {
          console.log(e);
          this.data = this.roleList;
          this.$message.error("获取数据失败");
        })
        .finally(() => {});
    },
    handleChange(value) {
      this.value = value;
      this.$emit("change", this.value);
    },
  },
  mounted() {
    this.value = this.role;
    this.data = this.roleList;
  },
};
</script>

<style>
</style>